---
metaTitle: Dialog
metaDescription: Modal dialog window displayed above the page.
sourcePath: components/dialog
---

```jsx live=true
<Dialog.Root>
	<Dialog.Trigger>
		<Button>Edit profile</Button>
	</Dialog.Trigger>

	<Dialog.Content maxWidth="450px">
		<Dialog.Title>Edit profile</Dialog.Title>
		<Dialog.Description size="2" mb="4">
			Make changes to your profile.
		</Dialog.Description>

		<Flex direction="column" gap="3">
			<label>
				<Text as="div" size="2" mb="1" weight="bold">
					Name
				</Text>
				<TextField.Root
					defaultValue="Freja Johnsen"
					placeholder="Enter your full name"
				/>
			</label>
			<label>
				<Text as="div" size="2" mb="1" weight="bold">
					Email
				</Text>
				<TextField.Root
					defaultValue="freja@example.com"
					placeholder="Enter your email"
				/>
			</label>
		</Flex>

		<Flex gap="3" mt="4" justify="end">
			<Dialog.Close>
				<Button variant="soft" color="gray">
					Cancel
				</Button>
			</Dialog.Close>
			<Dialog.Close>
				<Button>Save</Button>
			</Dialog.Close>
		</Flex>
	</Dialog.Content>
</Dialog.Root>
```

## API Reference

This component inherits props from the [Dialog primitive](/primitives/docs/components/dialog).

{

<Callout.Root my="5" color="gray">
	<Callout.Icon>
		<InfoCircledIcon />
	</Callout.Icon>
	<Callout.Text>
		Note that this dialog is designed around the modal pattern, so the{" "}
		<Code>modal</Code> prop is unavailable.
	</Callout.Text>
</Callout.Root>

}

### Root

Contains all the parts of a dialog.

### Trigger

Wraps the control that will open the dialog.

### Content

Contains the content of the dialog. This component is based on the `div` element.

<ThemesPropsTable defs="dialogContentPropDefs" />

### Title

An accessible title that is announced when the dialog is opened. This part is based on the [Heading](/themes/docs/components/heading) component with a pre-defined font size and leading trim on top.

### Description

An optional accessible description that is announced when the dialog is opened. This part is based on the [Text](/themes/docs/components/text) component with a pre-defined font size.

If you want to remove the description entirely, remove this part and pass `aria-describedby={undefined}` to `Content`.

### Close

Wraps the control that will close the dialog.

## Examples

### Size

Use the `size` prop to control size of the dialog. It will affect the `padding` and `border-radius` of the Content.
Use it in conjunction with the `width`, `minWidth` and `maxWidth` props to control the width of the dialog.

```jsx live=true line=6,17,28,39
<Flex gap="4" align="center">
	<Dialog.Root>
		<Dialog.Trigger>
			<Button variant="soft">Size 1</Button>
		</Dialog.Trigger>
		<Dialog.Content __size__="1" maxWidth="300px">
			<Text as="p" trim="both" size="1">
				The quick brown fox jumps over the lazy dog.
			</Text>
		</Dialog.Content>
	</Dialog.Root>

	<Dialog.Root>
		<Dialog.Trigger>
			<Button variant="soft">Size 2</Button>
		</Dialog.Trigger>
		<Dialog.Content __size__="2" maxWidth="400px">
			<Text as="p" trim="both" size="2">
				The quick brown fox jumps over the lazy dog.
			</Text>
		</Dialog.Content>
	</Dialog.Root>

	<Dialog.Root>
		<Dialog.Trigger>
			<Button variant="soft">Size 3</Button>
		</Dialog.Trigger>
		<Dialog.Content __size__="3" maxWidth="500px">
			<Text as="p" trim="both" size="3">
				The quick brown fox jumps over the lazy dog.
			</Text>
		</Dialog.Content>
	</Dialog.Root>

	<Dialog.Root>
		<Dialog.Trigger>
			<Button variant="soft">Size 4</Button>
		</Dialog.Trigger>
		<Dialog.Content __size__="4">
			<Text as="p" trim="both" size="4">
				The quick brown fox jumps over the lazy dog.
			</Text>
		</Dialog.Content>
	</Dialog.Root>
</Flex>
```

### With inset content

Use the [Inset](/themes/docs/components/inset) component to align content flush with the sides of the dialog.

```jsx live=true
<Dialog.Root>
	<Dialog.Trigger>
		<Button>View users</Button>
	</Dialog.Trigger>
	<Dialog.Content>
		<Dialog.Title>Users</Dialog.Title>
		<Dialog.Description>
			The following users have access to this project.
		</Dialog.Description>

		<Inset side="x" my="5">
			<Table.Root>
				<Table.Header>
					<Table.Row>
						<Table.ColumnHeaderCell>Full name</Table.ColumnHeaderCell>
						<Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>
						<Table.ColumnHeaderCell>Group</Table.ColumnHeaderCell>
					</Table.Row>
				</Table.Header>

				<Table.Body>
					<Table.Row>
						<Table.RowHeaderCell>Danilo Sousa</Table.RowHeaderCell>
						<Table.Cell>danilo@example.com</Table.Cell>
						<Table.Cell>Developer</Table.Cell>
					</Table.Row>

					<Table.Row>
						<Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>
						<Table.Cell>zahra@example.com</Table.Cell>
						<Table.Cell>Admin</Table.Cell>
					</Table.Row>
				</Table.Body>
			</Table.Root>
		</Inset>

		<Flex gap="3" justify="end">
			<Dialog.Close>
				<Button variant="soft" color="gray">
					Close
				</Button>
			</Dialog.Close>
		</Flex>
	</Dialog.Content>
</Dialog.Root>
```
